Text Editors

Text Editor vs IDE

Firstly, it is important to understand the difference between an IDE and a text editor.
- text editor vs IDE
- A text editor purely helps with writing code across a wide range of languages.
- An IDE on the other hand helps with the compilation and debugging process, however, is usually focused on a single language.
Because I'm going to use a wide range of languages, it makes sense for me to breakdown my requirements into:
- One single text editor that can be conveniently customized and fine tuned for my development needs across all languages.
- A bunch of individual compilers and debugging tools to individually work with each of the languages that I need to use as a part of the project. These compilers and debuggers will fortunately also be easily installed within the text editor that we shall use.

Text Editor

While selecting a text editor, some of the factors that I kept in mind are:
- Speed of typing - useful auto-completion features and shortcuts
- Accuracy of code - suggestions and error highlighting across multiple languages
- Best practices - plugins and open source features that get updated by users better equipped than I am
- Value added features - features like a built in terminal and compiler, even incomplete ones which can save a little bit of time during development
- Cost - I'd like to avoid spending money on development when there are so many outstanding tools available for free

Putting all of this together, Microsoft's Visual Studio Code come's up on top of my list. Some resources that help arrive at a decision for the same are:
- best text editors
- full stack development guide

Compiling and Debugging

I will have a deeper look at compiling and debugging tools by language, as and when I get into those. For the time being I will focus on setting up and getting comfortable with VS Code. This is easily doable because the tools required are plugins which can be installed in VS Code at a later stage.

Visual Studio Code

In order to get VS Code set up and started, or any tool or language for that matter, I like to do the following:
1. Pro Tips - I like starting here, because it gives me an idea of the best practices, and I can anchor my in depth learning around some important ideas that I know I need to look out for.
2. Tutorials - This is where 80% of my learning will come from, with 20% of the effort. The experts will be able to show me the best way of setting up, and using the tool, and should cover the bulk of what I need to know.
3. Documentation - And here I will find the remaining 20% with a solid 80% effort. But there really is no substitute for super thorough understanding, which one only develops by getting their hands dirty.

Install directly from the VS Code site

Pro Tips

VS Code top 10 pro tips
- ⌘ + Shift + P - command palette.
  - Find keyboard shortcuts references.
  - Whenever in doubt, use the command palette to look for the required action. This is the most powerful way of navigating VS Code.
- Snippets - language specific snippet plugins can be installed to help auto-complete useful repeating blocks of code.
- Terminal - drag up or Ctrl + ` or through command palette.
- ⌘ + Spacebar - Intellisense auto-complete.
- Command Palette + @ - all methods, interfaces, classes etc defined in the file.
- Right Click + Peak Definition - shown definition.
- Right Click + See References - see all files referencing definition.
- Right Click + Rename Symbol - rename definition and all references.
- ⌘ +K + Z - zen mode, with all extra features hidden (only code visible).
- Spotify extension for vscode - music while you code.
- Debugger Panel & Chrome Debugger for front end apps.
- Gitlens - for checking git version, modifications. All git commands can be run from this tab.
- Install Gitlens Gitsupercharged.
- VS Live Share - to share and edit code live with collaborators, as if it’s a google doc.

There's a bunch of other pro tip videos out there which might shine more light on the best practices. But this has already laid out for me the sort of advantages that I should look to gain from this text editor and the sort of practices that I should build in. I don't understand what a lot of the above features mean, or why they're useful yet, but that lays down the path for how I'd like to learn how to use VS Code.

Tutorial

VS Code tutorial for beginners
Learning checklist (learn how to):
- Create new projects, folders and files and saving
- Auto-populate code skeletons using intellisense/emmet
  - Search for extensions
  - Read and understand the extensions
  - Uninstalling extensions
- View -> Split Editor + Toggle Editor Group Layout
- Activity Bar
  - Explorer
  - Search
  - Source Control (Gitlens)
  - Debugging
  - Extensions
- Bottom Panel
  - Problems
  - Output
  - Terminal + Additional terminal tabs
  - Debug Console
- Change theme
- Command palette
- Search for extensions for language support
- Materials icons
- Go to definition / peak definition
- See references / rename symbols
- Find all keybindings (shortcuts) references and edit commands
- Add and remove multiple cursors
- Select multiple matching words
- Format document
- Open and edit settings
  - Difference between user and workspace settings
- Adding folders to workspace


Clearly some of the main takeaways or benefits of this text editor are:
- Intelliesense/emmet powered auto-complete and the extensions that power it
- Shortcuts and command palette for speed
- Debugging and terminal built-in
- Settings to customise
- Other extensions to improve experience

Extensions

While a lot of the above will be picked up through the detailed documentation and while learning specific languages, a good set of extension to begin with can be put in place. This part is quite fun, because it makes VS Code a lot more powerful, easy to use and sometimes fun. Almost all of the extensions mentioned in the below links are very useful, and could be added:
- 15 best VS Code extensions
- best VS Code extensions
- top 10 VS Code extensions 2021
- 15 best VS Code extensions for web developers

One should ideally pick out extensions specific to the languages and tools being used. To start with I have put in all extensions that I thought might be useful, and decided to revisit and clean them up basis my usage. The hope is that they will help put in place best practises from the very start:
- Angular snippets version 11
- Auto Close Tag
- Auto Rename Tag
- Better Comments
- Bookmarks
- Bracket Pair Colorizer 2
- Code Spell Checker
- Colorize
- Debugger for Chrome
- Docker (after installing docker on system in development operations)
- ES7 React/Redux/GraphQL/React-Native snippets
- GitLens - Git supercharged (after installing git through terminal)
  - Under the explorer tab (when no folder is open), there will be an "Open Folder" and "Clone Repository" option. Select "Clone Repository".
  - Select the "Clone from GitHub" option which shows up.
  - Sign in to github on the browser and authorize access.
  - From the account button at the bottom we might have to also authorize or sign in again for GitLens.
- HTML snippets
- Icon Fonts
- Import Cost
- Javascript (ES6) code snippets
- Jupyter
- Material Icon Theme
- Mithril Emmet
- Npm Intellisense
- Path Intellisense
- Polacode
- Python (after installing python through terminal)
- Terminal
- TODO Highlight
- Vue 3 snippets

Settings Sync

Now that we have setup visual studio the way we want, we should also sync these settings. This ensures that if we login on a different device, or have to reinstall later, we have our settings set the way we want them:
settings sync
- Click on the gear icon for settings at the bottom left of the window.
- Select "Turn on Settings Sync…".
- Select "Turn On".
- Leave all options as ticked, to sync all of them. Click on "Sign in & Turn on".
- Sign in with GitHub (should already be signed in).
- When signing in on a different device, choose to "Replace Local" settings with the remote synced settings.

Niceties

Even though we have learnt how to change the theme and have a nice dark theme complimented with pretty colours (courtesy some extensions), we could still benefit from some improvements. Here I will change the font being used and importantly enable some ligatures. This ensures that some text representations like >= come up in a more coding/mathematical notation.
- Install Fira code through
  - brew tap homebrew/cask-fonts
  - brew install --cask font-fira-code
- ⌘ + Shift + P to open command palette and search for "Settings" to open settings.json
- Add the lines
  - "editor.fontFamily": "Fira Code",
  - "editor.fontLigatures": true
The ligatures supported by Fira code are:

Documentation

Create & Run

Create a Folder
- File->Open Workspace->Select Folder
Create Files
- New File icon within the file explorer tab
Auto Save
- File->Auto Save
Intellisense
- Tab for autocompletion
- Hover over text for overview
- Right click for powerful editing options
  - Go to definition/declaration/reference OR Peek
  - Format Document
  - Find all references & Call hierarchy
  - Rename symbol & Change all occurenes
Open Terminal
- Bottom bar->Click on cancel,exclamation & i icon
- Or View->Terminal
Run Code
- Within terminal use zsh navigation commands and language specific run commands

Editing

Multi cursor editing
- Create more cursors with ⌘ + Option + Up/Down
- Remove all cursors with Esc
Column Box selection
- Click + Shift + Option & drag to select text in a column box (instead of full lines)
Fast scrolling
- Hold down the option button while scrolling to scroll faster
Intellisense
- While typing, if intellisense doesn't auto-pop-up use Ctrl + Space
- Hover mouse over text or right click for completed code
Find and Replace
- ⌘ + F
Refactoring
- Lightbulb symbol with green squiggles appear -> Clicking and following will provide refactoring actions & quick fixes
  - These will make the code faster / more efficient
  - Fix potential failure at fringe cases

Debugging

Insert breakpoints/logpoint
- Hover mouse to the left of line number->click so that red dot appears
- Hover mouse to the left of line number->right click and select log point to send message to console instead of pausing. A red diamond will appear
- Run->Add/toggle breakpoint
Debugging
- Run->Start Debugging->Select appropriate language
Continue - Moves till the next breakpoint
Step Over - Goes to next line
Step into - Goes into function call
Step out - Gets out of current function call
Restart - Runs program again
Stop - Force stops run
Run Tab
- Variable Values at that specific instance
- Call Stack to show function call hierarchy

Command Palette

⌘ + Shift + P - command palette
- Find keyboard shortcuts references.
- Whenever in doubt, use the command palette to look for the required action. This is the most powerful way of navigating VS Code.

Version Control

Various actions and how to use them are covered in page on "Git"
Gutter Indicators
- Lines marked in blue (near line number) have been edited
- Lines marked in green (near line number) are new lines

Layout

Multi window (side by side) editing
- Drag any active file towards a side of the main editing area and the editing window will get split into smaller parts
- Navigate from one window to another with ⌘ + 1, ⌘ + 2 … ⌘ + < window number >
Even though I haven't used this nomenclature through this doc (while learning), it will help to know what each part of the editor is called, in order to google and solve problems

To understand more about the layout/UI and the corresponding nomenclature, follow this link